<template>
  <div v-if="orderType == 1">
    <div class="header" style="padding-left: 25px">
      <span style="line-height: 40px"
        ><b>{{ order.create_time }}</b></span
      >
      <span style="line-height: 40px; margin-left: 30px"
        ><b>订单编号： {{ order.order_no }}</b></span
      >
    </div>
    <div class="body">
      <div style="display: inline-block">
        <router-link :to="'/goodview/' + order.good_id">
          <img
            :src="baseApi + order.imgs"
            style="width: 100px; height: 100px"
          />
        </router-link>
      </div>
      <div style="display: inline-block; line-height: 40px">
        <table>
          <tr>
            <th>商品</th>
            <th>规格</th>
            <th>数量</th>
            <th>总价</th>
            <th>收货人</th>
            <th>订单状态</th>
          </tr>
          <tr>
            <a :href="'/goodview/' + order.good_id">
              <td>{{ order.good_name }}</td>
            </a>
            <td>{{ order.standard }}</td>
            <td>{{ order.count }}</td>
            <td>{{ order.total_price }}</td>
            <el-popover
              placement="bottom-start"
              width="200"
              trigger="hover"
              :content="address"
            >
              <td slot="reference" style="color: #42b983">
                {{ order.link_user }}
              </td>
            </el-popover>
            <template v-if="order.state === '已发货'">
              <td style="color: #42b983">{{ order.state }}</td>
              <td>
                <el-button
                  style="margin-left: 20px; font-size: 15px"
                  type="primary"
                  @click="receive"
                  >确认收货</el-button
                >
              </td>
            </template>
            <template v-else-if="order.state === '已收货'">
              <td style="color: #42b983">
                <a class="el-icon-check"></a>{{ order.state }}
              </td>
            </template>
            <template v-else-if="order.state === '已支付'">
              <td style="color: #3b62f8">{{ order.state }}</td>
              <td>
                <el-button style="font-size: 15px" type="info" plain disabled
                  >等待发货</el-button
                >
              </td>
            </template>
            <template v-else>
              <td>{{ order.state }}</td>
              <td>
                <el-button
                  style="margin-left: 20px; font-size: 15px"
                  type="success"
                  @click="pay"
                  >去支付</el-button
                >
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div v-else-if="orderType == 2">
    <div class="order-main">
      <div class="order-main-left">
        <img :src="baseApi + order.imgs" style="width: 100px; height: 100px" />
        <div class="order-main-detail">
          <div>
            <div style="cursor: pointer" @click="gotoDetail(order)">
              {{ order.good_name }}
            </div>
            <div class="order-main-fuben">
              【{{ order.standard }}】;【{{ order.count }}】;【{{
                order.link_user
              }}】;【{{ order.order_no }}】
            </div>
          </div>
          <div class="order-main-price">￥:{{ order.total_price }}</div>
        </div>
      </div>
      <div class="order-main-state">
        <template v-if="order.state === '已发货'">
          <span style="color: #42b983" class="order-state">{{
            order.state
          }}</span>
          <span>
            <div
              class="order-text"
              style="background-color: var(--color-8); color: var(--color-20)"
              @click="receive"
            >
              确认收货
            </div>
          </span>
        </template>
        <template v-else-if="order.state === '已收货'">
          <span style="color: #42b983" class="order-state"
            ><a class="el-icon-check"></a>{{ order.state }}</span
          >
        </template>
        <template v-else-if="order.state === '已支付'">
          <span style="color: #3b62f8" class="order-state">
            {{ order.state }}</span
          >
          <span>
            <div class="order-text" style="background-color: var(--color-4)">
              等待发货
            </div>
          </span>
        </template>
        <template v-else>
          <span>
            <div
              class="order-text"
              style="background-color: var(--color-1); color: var(--color-7)"
              @click="pay"
            >
              {{ order.state }}
            </div>
          </span>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";

const store = useStore();
const router = useRouter();

// Props
const props = defineProps({
  order: {
    type: Object,
    default: () => ({}),
  },
  orderType: {
    type: Number,
    default: 2,
  },
});

// Data
const baseApi = ref<string>(store.state.baseApi);
const address = ref<string>(
  `电话:${props.order.link_phone} 地址:${props.order.link_address}`
);

// Methods
const gotoDetail = (order: any) => {
  router.push({
    path: "/goodview/" + order.good_id,
  });
};

const pay = () => {
  router.push({
    path: "pay",
    query: { money: props.order.total_price, orderNo: props.order.order_no },
  });
};

const receive = () => {
  ElMessageBox.confirm("是否确认收货?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    store.state.request
      .get("/api/order/received/" + props.order.order_no)
      .then((res: any) => {
        if (res.code === "200") {
          ElMessage.success("收货成功");
          props.order.state = "已收货";
        }
      });
  });
};
</script>

<style scoped lang="less">
.order-main {
  padding: 10px 20px;
  margin-top: 20px;
  border-radius: 6px;
  background-color: var(--color-9);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .order-main-left {
    display: flex;
    flex-direction: row;
    .order-main-detail {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      justify-content: space-between;
      .order-main-fuben {
        margin-top: 5px;
        width: 180px;
        color: var(--color-2);
        font-size: 12px;
      }
      .order-main-price {
        margin-left: 10px;
        margin-top: -5px;
        color: var(--color-20);
      }
    }
  }
  .order-main-state {
    display: flex;
    flex-direction: row;
    align-items: center;
    .order-state {
      margin-right: 10px;
    }
    .order-text {
      height: 32px;
      line-height: 32px;
      padding: 5px 10px;
      text-align: center;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
.header {
  background-color: var(--order-header);
  height: 40px;
  border-radius: 25px 25px 0 0;
}
.body {
  background-color: white;
  padding: 20px;
  border-radius: 0 0 25px 25px;
  margin-bottom: 10px;
}
th,
td {
  width: 120px;
  text-align: center;
}
th {
  font-size: 15px;
  color: #00b7ff;
  font-weight: normal;
}
</style>
